
<template>
	<view class="content">
		<div class="header">
			<Swiptq :banners=banners />
		</div>
		<div class="main">
			<div class="main1">
				<div ckass="main1-top" style="width: 100%;background-color: #fff;opacity:0.8;margin-top: -40px;border-radius: 10px;">
					<view class="main1-top-top">
						<view @click="DearUser" style="color: rgb(146, 149, 96);">亲爱的用户</view>
						<view class="main1-top-top1">
							<view @click="NesherVoucher">奈雪券 {{current}}</view>
							<view>|</view>
							<view>成长值</view>
						</view>
						<view class="main1-top-top2" @click="MembershipCode">
							<i class="i">会员码</i>
							<i class="icon iconfont icon-erweima" style="font-size: 22px;"></i>
						</view>
					</view>
					<div class="main1-top-main" style="background-color: #fff;border-radius: 10px;">
						<div class="main1-top-main-header" style="margin-top: 10px;">
							<view class="main1-top-main-header1" style="padding: 5px 0;border-bottom: 1px solid #ccc;">
								<view class="main1-top-main-header1-left" style="display: flex;">
									<i class="icon iconfont iconmap" style="color: rgb(181, 210, 80);"></i>
									北京乐多港店
								</view>
								<view class="main1-top-main-header1-right" style="display: flex;">
									更换门店
									<i class="icon iconfont iconyou" style="margin: 3px 5px;"></i>
								</view>
							</view>
							<view class="main1-top-main-header2">
								<view class="main1-top-main-header2-left">
									<img style="width: 85px;height: 125px;" src="https://upload-images.jianshu.io/upload_images/28962002-c3fa06563d5380f3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
								</view>
								<view class="main1-top-main-header2-right">
									 <img style="width: 85px;height: 125px;" src="https://upload-images.jianshu.io/upload_images/28962002-cdd40c2e45272f9e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
								</view>
							</view>
						</div>
						<div class="main1-top-main-main">
							<view class="" v-for="(item,index) in arrObj" :key="item">
								<p><img :src="item.img" style="width: 70px;height: 60px;" alt=""></p>
								<h3>{{item.name}}</h3>
							</view>
						</div>
					</div>
				</div>
				<div class="main_top">
					<div>
						<h4 style="color: #ccc;">Events</h4>
						<h3>会员新鲜事</h3>
					</div>
					<div style="margin-top: 21px;color: #ccc;">
						<h6>更多 More</h6>
					</div>
				</div>
				<div class="main_main" v-for="(item,index) in MainImg" :key="item">
					<p>
						<img style="width: 100%;height: 150px;margin-bottom: 10px;background-size: 100% 100%;" :src="item" alt="">
					</p>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup>
	import Doublelayerswiper from '@/components/Double-layers-wiper/Double-layers-wiper.vue'
		import Swiptq from "@/components/swiper/index.vue"
		import {ref} from "vue"
		const banners = [{
		   imageUrl: 'https://upload-images.jianshu.io/upload_images/28962002-9c6c17a6733afab1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
		  },
		  {
		   imageUrl: 'https://upload-images.jianshu.io/upload_images/28962002-08a2e209955b281a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
		  },
		  {
		   imageUrl: 'https://upload-images.jianshu.io/upload_images/28962002-efe6ee8ce55ea4eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
		  }, {
		   imageUrl: 'https://upload-images.jianshu.io/upload_images/28962002-1ab5907a34e7cad4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
		  }, {
		   imageUrl: 'https://upload-images.jianshu.io/upload_images/28962002-a56a84f9eef09b73.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
		  }
		 ];
	
		
		const MainImg = [
			'https://upload-images.jianshu.io/upload_images/28962002-879fcc9c9aefc934.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
			'https://upload-images.jianshu.io/upload_images/28962002-da67fca2455f8cc9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
			'https://upload-images.jianshu.io/upload_images/28962002-2af8f47f4cafb6e6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
		];
		
		const arrObj = [
			{
				name:"一起喝",
				img:"https://upload-images.jianshu.io/upload_images/28962002-ca9de8339ea2cf62.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
			},
			{
				name:"入群有礼",
				img:"https://upload-images.jianshu.io/upload_images/28962002-453bddf34a551c81.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
			},
			{
				name:"企业团单",
				img:"https://upload-images.jianshu.io/upload_images/28962002-1ef967ea979777de.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
			},
			{
				name:"学生有礼",
				img:"https://upload-images.jianshu.io/upload_images/28962002-92d6f912b12a4cbb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
			},
			{
				name:"奈雪商城",
				img:"https://upload-images.jianshu.io/upload_images/28962002-1bfa23436fcf2407.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
			},
		]
		
</script>

<style scoped>
	@import "../../static/iconfont/iconfont.scss";
	@import "../../static/iconfont/iconfont.css";
	.header{
		width: 100%;
		height: 200px;
	}
	
	 
	.main{
		width: 100%;
		background: rgb(234, 227, 210);
	}
	.main1{
		width: 95%;
		margin: 0 2.5%;
	}
	.main_top{
		width: 100%;
		height: auto;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		padding: 5px 0;
	}
	.main1-top-top{
		display: flex;
		justify-content: space-between;
		padding: 10px 10px;
	}
	.main1-top-top>button{
		margin: 0;
	}
	.main1-top-top .main1-top-top1{
		display: flex;
		justify-content: space-between;
		color: rgb(146, 149, 96);
	}
	.main1-top-top .main1-top-top2{
		display: flex;
		justify-content: space-between;
	}
	.main1-top-main{
		padding: 0 10px;
	}
	.main1-top-main-header1{
		display: flex;
		justify-content: space-between;
	}
	.main1-top-main-header2{
		background: rgb(249, 249, 249);
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
	}
	.main1-top-main-main{
		width: 100%;
		padding-bottom: 10px;
		display: flex;
		overflow-x: scroll
	}
	.main1-top-main-main view{
		text-align: center;
		margin: 0 7px;
	}
	
</style>